<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过度</title>
    <style>
        /*transition-timing-function 属性规定过渡效果的速度曲线。
        transition-timing-function 属性可接受以下值：
            ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
            linear - 规定从开始到结束具有相同速度的过渡效果
            ease-in -规定缓慢开始的过渡效果
            ease-out - 规定缓慢结束的过渡效果
            ease-in-out - 规定开始和结束较慢的过渡效果*/
        div {
            width: 100px;
            height: 100px;
            background: red;
            transition: width 2s;
        }

        #div1 {transition-timing-function: linear;}
        #div2 {transition-timing-function: ease;}
        #div3 {transition-timing-function: ease-in;}
        #div4 {transition-timing-function: ease-out;}
        #div5 {transition-timing-function: ease-in-out;}

        div:hover {
            width: 300px;
        }
    </style>
</head>
<body>
<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>
</body>
</html>